<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <el-form size="small" label-width="80px">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="销售单编号">
                <el-input     style="width: 100%" v-model="query.salesOrderCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="销售单日期">
                <el-date-picker
                  v-model="query.dataExtent"
                  type="daterange"
                  align="right"
                  @change="getValue()"
                  unlink-panels
                  style="width: 100%"
                  format="yyyy - MM - dd "
                  value-format="yyyy-MM-dd"
                  default-value
                  range-separator=""
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="客户">
                <table-select
                  :tableColumns="[{prop:'code',label:'客户编码',width:'100'},{prop:'name',label:'客户名称',width: '280'}]"
                  :value.sync="query.customerIds"
                  url="api/dropDown/basCustomerList"
                  :params="{businessAttr:'3'}"
                />
<!--                <zSelect :value.sync="query.customerId"  url="api/dropDown/basCustomerList" :params="{businessAttr:'3'}" style="width:  100%" />-->
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="拣货状态">
                <el-select
                  v-model="query.pickStatus"
                  class="filter-item"
                  clearable
                  placeholder="拣货状态"
                  size="small"
                  style="width: 100%"
                  @change="crud.toQuery"
                >
                  <el-option
                    v-for="item in dict.t_ware_sales_invoice_pick_status"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="备注">
                <el-input  v-model="query.remark" placeholder=" "  style="width: 100%"/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="销售单类型">
                <el-select v-model="query.salesOrderType" style="width:  100%"  class="edit-input" placeholder="请选择单据类型" >
                  <el-option
                    v-for="(item,index) in dict.t_sales_order_type"
                    :key="index"
                    v-if="item.seq>0"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="是否打印">
                <el-select clearable v-model="query.isPrint" style="width: 100%;"  class="edit-input" placeholder="请选择打印状态" >
                  <el-option
                    label="全部"
                    value=""
                  />
                  <el-option
                    v-for="(item,index) in dict.common_yes_or_no"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" align="center">
              <rrOperation :crud="crud" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="总店">
                <table-select
                  :tableColumns="[{prop:'code',label:'单位编码',width:'100'},{prop:'name',label:'往来单位名称',width: '280'}]"
                  :value.sync="query.pCustomerIds"
                  url="api/dropDown/basCustomerList"
                  :params="{customerAttr:1}"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="仓库">
                <zSelect :value.sync="query.warehouseIds" :multiple="multiple"  url="api/dropDown/basWarehouseList"  style="width:  100%"/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="制单人" prop="createUserIds">
                <zSelect  :multiple="multiple" style="width: 100%" :value.sync="query.createUserIds" url="api/dropDown/sysUserList" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="二批">
                <table-select
                  :tableColumns="
                  [
                  {prop:'code',label:'二批编码',width: '100'},
                  {prop:'name',label:'二批名称',width: '280'},
                  ]"
                  labelKey="name"
                  valueKey="id"
                  width="400"
                  :params="{type:3}"
                  :value.sync="query.sCustomerIds"
                  placeholder="请选择二批"
                  url="api/dropDown/basCustomerList"
                ></table-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form size="small" label-width="80px" :rules="rules" ref="form" :model="crud.order"
                 :disabled="crud.order.orderStatus==='PASS'" style="margin-top: 20px">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="装车日期" prop="busDate">
                <el-date-picker
                  v-model="crud.order.busDate"
                  type="date"
                  size="small"
                  :disabled="crud.order.orderStatus==='PASS'"
                  class="date-item"
                  style="width: 100%;"
                  format="yyyy - MM - dd"
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="车辆" prop="carId">
                <zSelect     style="width: 100%" @change="getCar" :value.sync="crud.order.carId" url="api/dropDown/basCarList" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="司机" prop="driverUserId">
                <zSelect     style="width: 100%" :value.sync="crud.order.driverUserId" url="api/dropDown/sysUserList" :params="{businessAttr:'5'}" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="跟车" prop="followUserIds">
                <zSelect  :multiple="multiple"    style="width: 100%" :value.sync="crud.order.followUserIds" url="api/dropDown/sysUserList" :params="{businessAttr:'6'}"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="部门" prop="deptId">
                <zSelect :value.sync="crud.order.deptId" url="api/dropDown/childSysDeptList" style="width:  100%"/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="人员" prop="userId">
                <zSelect :value.sync="crud.order.userId"  url="api/dropDown/sysUserList" :params="{deptId:crud.order.deptId}"
                         style="width:  100%"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <crudOperation :permission="permission">
        <el-button
          slot="left"
          class="filter-item"
          size="mini"
          type="primary"
          @click="toPicking(crud.selections)"
        >
          保存
        </el-button>
        <el-button
          slot="left"
          class="filter-item"
          size="mini"
          type="primary"
          @click="deletePlus(crud.selections)"
        >
          删除
        </el-button>
      </crudOperation>
      <div class="content">
        <div class="content-left">
          <el-checkbox v-model="volume" @change="changeVolume">体积</el-checkbox>
          <el-checkbox v-model="weight" @change="changeWeight">重量</el-checkbox>
        </div>
        <div class="content-right"></div>
      </div>
      <!--      状态切换  -->
      <!--      <el-tabs v-model="query.pickStatus" @tab-click="handleClickPickStatus">-->
      <!--        <el-tab-pane label="未拣货" name="0"></el-tab-pane>-->
      <!--        <el-tab-pane label="拣货中" name="1"></el-tab-pane>-->
      <!--        <el-tab-pane label="拣货完成" name="2"></el-tab-pane>-->
      <!--        <el-tab-pane label="集货完成" name="3"></el-tab-pane>-->
      <!--        <el-tab-pane label="装车完成" name="4"></el-tab-pane>-->
      <!--      </el-tabs>-->
      <div>
        <!--        <el-form  size="small" :model="form" ref="form" :rules="rules" class="content">-->
        <!--          <el-form-item label="" class="left">-->
        <!--&lt;!&ndash;            <zSelect :value.sync="form.pickUserId" placeholder="请选择拣货人" url="api/dropDown/sysUserList" :params="{businessAttr:'3'}"/>&ndash;&gt;-->
        <!--          </el-form-item>-->
        <!--          <el-form-item label="单据列表"  class="center">-->
        <!--          </el-form-item>-->
        <!--          <el-form-item label="商品列表"  class="right">-->
        <!--          </el-form-item>-->
        <!--        </el-form>-->
      </div>
      <div class="content">
        <div class="left">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="线路" name="first">
              <div class="top">
                <el-input
                  placeholder="请输入"
                  v-model="filterBas">
                </el-input>
              </div>
              <el-tree
                :data="basLineList"
                show-checkbox
                ref="treeBas"
                default-expand-all
                :filter-node-method="filterNode"
                node-key="id"
                class="cent"
                @check-change=" handleCheckLineChange"
                :props="defaultProps">
              </el-tree>
            </el-tab-pane>
            <el-tab-pane label="区域" name="second">
              <div class="top">
                <el-input
                  placeholder="请输入"
                  v-model="filterArea">
                </el-input>
              </div>
              <el-tree
                :data="areaList"
                show-checkbox
                ref="treeArea"
                class="cent"
                default-expand-all
                :filter-node-method="filterNodeLine"
                node-key="id"
                @check-change="handleCheckChange"
                :props="defaultProps">
              </el-tree>

            </el-tab-pane>
          </el-tabs>

        </div>
        <div class="center">
          <!--表格渲染-->
          <el-table ref="table"
                    highlight-current-row="highlight-current-row"
                    @row-click="setId"
                    stripe
                    border v-loading="crud.loading" show-summary :data="crud.data" size="small" height="450px" style="width: 100%;" @selection-change="selectionChangeHandler" @row-dblclick="toDetailPlus($event)">
            <el-table-column :render-header="crud.renderHeader" type="selection" width="60" />
            <el-table-column :render-header="crud.renderHeader" type="index" width="60" label="序号"/>
            <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('salesOrderCode')" prop="salesOrderCode" label="销售单编号" width="100"/>
            <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('sourceCode')" prop="sourceCode" label="库存单号" />
            <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('customerName')" prop="customerName" label="客户" />
            <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('pickStatus')" prop="pickStatus" label="拣货状态" >
              <template slot-scope="scope">
                <el-tag>{{ dictName(dict.t_ware_sales_invoice_pick_status,scope.row.pickStatus)  }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('busDate')" prop="busDate" label="销售单日期" width="100">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.busDate) }}</span>
              </template>
            </el-table-column>
            <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('name')" prop="name" label="线路" />
            <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('customerAreaName')" prop="customerAreaName" label="区域" />
            <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('remark')" prop="remark" label="备注" />
            <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('taxAmount')" prop="taxAmount" label="金额" />
            <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('boxCount')" prop="boxCount" label="箱数" />
            <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('goodsCount')" prop="goodsCount" label="数量" />
            <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('volume')" prop="volume" label="体积" />
            <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('weight')" prop="weight" label="重量" />
            <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('pickUserName')" prop="pickUserName" label="拣货人" />
            <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('checkUserName')" prop="checkUserName" label="核对人" />
          </el-table>
          <pagination/>
          <div class="center-bt">
            <div class="center-bt-left">
              <span>车辆信息：</span>
              <span>剩余可装载体积：{{residueVolume}} m3</span>
              <span>剩余可装载重量：{{residueWeight}} kg</span>
            </div>
            <div class="center-bt-right">
              <span>选中合计：</span>
              <span>箱数合计：{{allBoxCount}}</span>
              <span>单据数量合计：{{allGoodsCount}}</span>
              <span>金额合计：{{allTaxAmount}} </span>
              <span>体积合计：{{allVolume}} m3</span>
              <span>重量合计：{{allWeight}} kg</span>
            </div>
          </div>
        </div>
        <drawer>
          <j-bill-detail url="/api/salesOrder/detail" type="get" :headerQuery="headerQuery" :params="detailParams"></j-bill-detail>
        </drawer>
      </div>
      <div class="right">
        <el-table
                  ref="table"
                  stripe
                  border
                  v-loading="crud.loading"
                  show-summary
                  :data="chooseData"
                  @selection-change="selectionChangeHandlerPlus"
                  size="small"
                  height="450px"
                  style="width: 100%;" >
          <el-table-column :render-header="crud.renderHeader" type="selection" width="60" />
          <el-table-column :render-header="crud.renderHeader" type="index" width="60" label="序号"/>
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('salesOrderCode')" prop="salesOrderCode" label="销售单编号" width="100"/>
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('customerName')" prop="customerName" label="客户" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('pickStatus')" prop="pickStatus" label="拣货状态" >
            <template slot-scope="scope">
              <el-tag>{{ dictName(dict.t_ware_sales_invoice_pick_status,scope.row.pickStatus)  }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('remark')" prop="remark" label="备注" />
        </el-table>
        <!--          <logisticsMap :info="info" :onGPS="onGPS"></logisticsMap>-->
      </div>
    </div>
    <pagination />
  </div>
</template>

<script>
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import crudLogisticsLoad from '@/api/erp/logisticsLoad'
import logisticsMap from '@/components/logisticsMap/map'
import { add } from '@/api/erp/basGoods'
import drawer from '@/components/drawer/drawer'
import jBillDetail from '@/components/jBillDetail/jBillDetail'
import { getDict } from '../../../api/erp/tableColumnConfig'
// crud交由presenter持有
const defaultCrud = CRUD({ title: '配送单新增', url: 'api/logisticsLoad/orderListForAdd',name:'orderListForAdd', sort: 'id,desc', optShow: {
    add: false,
    edit: false,
    del: false,
    download: true,
    leadingIn: false,
    downloadDetail:true,
    enable: false,
    disable: false,
    reject: false,
    pass: false
  },
  query:{
    sort:null,
    // pickStatus:'5'
  }, crudMethod: { ...crudLogisticsLoad }})
const defaultForm = {
  id: null,
  remark: null,
  code: null,
  name: null,
  type: null,
  saleType: null,
  busDate: null,
  receiveDate: null,
  sourceType: null,
  sourceId: null,
  sourceCode: null,
  serialNumber: null,
  customerOrderCode: null,
  customerId: null,
  customerCode: null,
  customerName: null,
  isContact: null,
  customerAreaId: null,
  customerAreaCode: null,
  customerAreaName: null,
  customerTypeId: null,
  customerTypeCode: null,
  customerTypeName: null,
  pCustomerId: null,
  pCustomerCode: null,
  pCustomerName: null,
  mCustomerId: null,
  mCustomerCode: null,
  mCustomerName: null,
  sCustomerId: null,
  sCustomerCode: null,
  sCustomerName: null,
  deptId: null,
  deptCode: null,
  deptName: null,
  userId: null,
  userCode: null,
  userName: null,
  warehouseId: null,
  warehouseCode: null,
  warehouseName: null,
  count: null,
  boxCount: null,
  taxAmount: null,
  noTaxAmount: null,
  tax: null,
  discountAmount: null,
  isCancelPick: null,
  pickStatus: null,
  pickSeq: null,
  pickUserId: null,
  pickUserCode: null,
  pickUserName: null,
  pickStartTime: null,
  pickEndTime: null,
  pickBoxCount: null,
  pickTaxAmount: null,
  pickNoTaxAmount: null,
  pickTax: null,
  isPickPrint: null,
  pickPrintCount: null,
  checkUserId: null,
  checkUserCode: null,
  checkUserName: null,
  checkTime: null,
  checkBoxCount: null,
  checkTaxAmount: null,
  checkNoTaxAmount: null,
  checkTax: null,
  isCheckPrint: null,
  checkPrintCount: null,
  isLoad: null,
  loadTime: null,
  loadOrderId: null,
  loadOrderCode: null,
  carId: null,
  carCode: null,
  carName: null,
  driverUserId: null,
  driverUserCode: null,
  driverUserName: null,
  followUserId: null,
  followUserIds: null,
  followUserCode: null,
  followUserName: null,
  packBoxCount: null,
  isPrint: null,
  printCount: null,
  seq: null,
  orderStatus: null,
  orderRemark: null,
  createUserId: null,
  createUserCode: null,
  createUserName: null,
  createTime: null,
  updateUserId: null,
  updateUserCode: null,
  updateUserName: null,
  updateTime: null,
  auditUserId: null,
  auditUserCode: null,
  auditUserName: null,
  auditTime: null,
  closeUserId: null,
  closeUserCode: null,
  closeUserName: null,
  closeTime: null,
  salesOrderType: null
}
export default {
  name: 'orderListForAdd',
  components: { pagination, crudOperation, rrOperation, udOperation,logisticsMap, drawer, jBillDetail },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['t_ware_sales_invoice_pick_status','t_sales_order_type','common_yes_or_no'],
  data() {
    return {
      copyForm: null,
      info: null,
      multiple:true,
      onGPS:[],
      chooseData: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      rules: {
        busDate: [
          { required: true, message: '装车日期不能为空', trigger: 'blur' }
        ],
        carId: [
          { required: true, message: '车辆不能为空', trigger: 'blur' }
        ],
        driverUserId: [
          { required: true, message: '司机不能为空', trigger: 'blur' }
        ],

      },
      headerQuery: {
        modelName:'salesOrderDetail',
        url: "api/salesOrder/detail",
        userId:this.$store.state.user.user.userId,
      },
      detailParams:{
        id:0
      },
      permission: {
        add: ['admin', 'orderListForAdd:add'],
        edit: ['admin', 'orderListForAdd:edit'],
        del: ['admin', 'orderListForAdd:del'],
        import: ['admin', 'orderListForAdd:import'],
        export: ['admin', 'orderListForAdd:export'],
        copy: ['admin', 'orderListForAdd:copy'],
        upload: ['admin', 'orderListForAdd:upload'],
        download: ['admin', 'orderListForAdd:download'],
        pass: ['admin', 'orderListForAdd:pass'],
        reject: ['admin', 'orderListForAdd:reject'],
        closed: ['admin', 'orderListForAdd:closed'],
        invalid: ['admin', 'orderListForAdd:invalid'],
        stop: ['admin', 'orderListForAdd:stop'],
        recover: ['admin', 'orderListForAdd:recover'],
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      volume:false,
      weight:false,
      basLineList:[], //线路
      areaList: [], // 区域
      props: {
        label: 'name',
        children: 'zones'
      },
      activeName: 'first',
      pickStatus: 0,
      search: null,
      count: 1,
      filterArea: '',
      filterBas: '',
      selectTypes: [],
      isPick: false,
      customerTypeIds:null,
      lineIds: null,
      pickList: [],
      total:0,
      page:1,
      size:10,
      isPickUser: false,
      isPickSep: false,
      maxWeight: 0,
      maxVolume: 0,
      maxBoxCount: 0,
      residueVolume: 0,
      residueWeight: 0,
      allWeight: 0,
      allVolume: 0,
      allTaxAmount: 0,
      allGoodsCount: 0,
      allBoxCount: 0,
      changeVal: [],
      historySelect:[],
      currentSelect:[],
    }
  },
  watch: {
    filterArea(val) {
      this.$refs.treeArea.filter(val);
    },
    filterBas(val) {
      this.$refs.treeBas.filter(val);
    }
  },
  created() {
    this.basLine()
    if (this.$route.params.id ===':id' || this.$route.params.id == 'add') {
      this.crud.order = {
        id: null,
        carId: null,
        driverUserId: null,
        followUserIds: null,
        deptId: null,
        userId: null,
        saleType: 1,
        remark:null,
        busDate: this.getTime(),
      }
      this.copyForm = Object.assign({},this.crud.order)
    }else{
      this.crud.order = this.$route.query.order
      this.copyForm = Object.assign({},this.crud.order)
    }
    getDict({dictCode:'dict_logistics_add_order_is_print_query'}).then(res=>{
      this.query.isPrint = res.content[0].value
      this.crud.toQuery()
    })
    // setTimeout(()=>{
    //   this.crud.page.size = 999
    // },500)
  },
  methods: {
    getValue(e){
      this.query.startTime =this.query.dataExtent[0]
      this.query.endTime =this.query.dataExtent[1]
    },
    getCar(e){
      console.log('maxVolume',e)
      this.maxVolume = e.maxVolume
      this.maxWeight = e.maxWeight
      this.maxBoxCount = e.maxBoxCount
      this.residueVolume = Number(this.maxVolume) - Number( this.allVolume)
      this.residueWeight = Number(this.maxVolume) - Number( this.allVolume)
    },

    changeVolume(e){
      if(!this.crud.order.carId){
        this.$message({
          type: 'error',
          message: '请先选择车辆'
        });
        this.volume = false
        return false
      }
      this.residueVolume = Number(this.maxVolume) - Number( this.allVolume)
      this.residueWeight = Number(this.maxVolume) - Number( this.allVolume)
      if(e == true){
        if(this.residueVolume<0){
          this.$confirm('已超体积装车,是否继续装车！', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '确认装车!'
            });
          }).catch(() => {
            this.volume = false
            this.$message({
              type: 'info',
              message: '已取消装车'
            });
          });
        }
      }
      console.log('changeVolume',e)
    },
    changeWeight(e){
      if(!this.crud.order.carId){
        this.$message({
          type: 'error',
          message: '请先选择车辆'
        });
        this.weight = false
        return false
      }
      this.residueVolume = Number(this.maxVolume) - Number( this.allVolume)
      this.residueWeight = Number(this.maxVolume) - Number( this.allVolume)
      if(e == true){
        if(this.residueWeight<0){
          this.$confirm('已超重量装车,是否继续装车！', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '确认装车!'
            });
          }).catch(() => {
            this.weight = false
            this.$message({
              type: 'info',
              message: '已取消装车'
            });
          });
        }
      }
    },
    deletePlus(){
      this.chooseData = this.deWeight( this.chooseData,this.changeVal)
      this.crud.selections = []
    },
    deWeight(arr1, arr2) {
      return arr1.filter((v) => arr2.every((val) => val.salesOrderCode!= v.salesOrderCode));
    },
    selectionChangeHandlerPlus(val){
      this.changeVal = val
    console.log('val',val)
    },
    selectionChangeHandler(val) {
      this.crud.selections = val
      this.allWeight= 0
      this.allTaxAmount= 0
      this.allGoodsCount= 0
      this.allVolume= 0
      this.allBoxCount= 0

      val.map((res)=>{
        this.allWeight = Number( this.allWeight) + res.weight || 0
        this.allVolume = Number( this.allVolume) + res.volume || 0
        this.allTaxAmount = Number( this.allTaxAmount) + res.taxAmount || 0
        this.allGoodsCount = Number( this.allGoodsCount) + res.goodsCount || 0
        this.allBoxCount = Number( this.allBoxCount) + res.boxCount || 0
      })

      this.residueVolume = Number(this.maxVolume) - Number( this.allVolume)
      this.residueWeight = Number(this.maxVolume) - Number( this.allVolume)
      if(this.residueVolume<0&&this.volume){
        this.$confirm('已超体积装车,是否继续装车！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '确认装车!'
          });
        }).catch(() => {
          this.volume = false
          this.$message({
            type: 'info',
            message: '已取消装车'
          });
        });
      }

      if(this.residueWeight<0&&this.weight){
        this.$confirm('已超重量装车,是否继续装车！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '确认装车!'
          });
        }).catch(() => {
          this.weight = false
          this.$message({
            type: 'info',
            message: '已取消装车'
          });
        });
      }
      if(this.crud.page.page == 1){

      }else {

      }
      var a= new Set(this.chooseData.concat(this.crud.selections))
      this.chooseData =Array.from(a);
      console.log('val',this.chooseData)
    },
    toDetailPlus(e){
      this.onGPS = e.location.split(',')
      console.log('e',e.location.split(','))
    },
    getTime(date = new Date()){
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? ('0' + m) : m;
      var d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      var h = date.getHours();
      h=h < 10 ? ('0' + h) : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? ('0' + minute) : minute;
      var second=date.getSeconds();
      second=second < 10 ? ('0' + second) : second;
      // +' '+h+':'+minute+':'+second;
      return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second
    },
    toPicking(row){
      if(row.length == 0){
        this.$message({
          message: '请勾选一笔发货单！',
          type: 'error'
        })
        return false
      }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // if (this.$route.params.id == 'add' &&  this.crud.order.followUserIds) {
          //   console.log(this.crud.order.followUserIds)
          //   this.crud.order.followUserIds = this.crud.order.followUserIds.join(',')
          // }
          this.crud.order.orderList = this.chooseData
          if(this.$route.params.id == 'add'){
            this.crud.order.orderId = ''
            crudLogisticsLoad.add(this.crud.order).then(res => {
              this.$message({
                message: '保存成功！',
                type: 'success'
              })
              this.$set(this.crud,'order',Object.assign({},this.copyForm))
              // this.crud.data = []
              this.chooseData = []
              this.$store.dispatch("tagsView/delView", this.$route);
              this.$router.push({path:`/redirect/logistics/logisticsLoadDetail/${res.data.id}`})
              this.crud.toQuery()
            }).catch((res) => {
            })
          }else{
            this.crud.order.orderId = this.$route.params.id
            crudLogisticsLoad.appendOrder(this.crud.order).then(res => {
              this.$message({
                message: '追加成功！',
                type: 'success'
              })
              this.$set(this.crud,'order',Object.assign({},this.copyForm))
              // this.crud.data = []
              this.chooseData = []
              this.$store.dispatch("tagsView/delView", this.$route);
              this.$router.push({path:`/redirect/logistics/logisticsLoadDetail/${this.$route.params.id}`})
              this.crud.toQuery()
            }).catch((res) => {
            })
          }
        }
      })
    },
    handleSizeChange(val) {
      this.size = val
      this.toPicking()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val
      this.toPicking()
      console.log(`当前页: ${val}`);
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
      const rows = this.$refs.treeArea.getCheckedNodes()
      if (rows.length == 0) {
        return false
      }
      this.selectTypes = rows.map(r => r.id)
      this.query.customerAreaIds = this.selectTypes.join(',')
      this.query.lineIds = []
      this.crud.refresh()
      console.log('selectTypes', this.selectTypes)
      this.getGoodsList()
    },
    handleCheckLineChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
      const rows = this.$refs.treeBas.getCheckedNodes()
      if (rows.length == 0) {
        return false
      }
      this.selectTypes = rows.map(r => r.id)
      this.query.lineIds = this.selectTypes.join(',')
      this.query.customerAreaIds = []
      this.crud.refresh()
      this.getGoodsList()
    },
    handleClickPickStatus(){
      this.query.lineIds = ''
      this.query.customerAreaIds = ''
      this.crud.refresh()
    },
    setId(e){
      console.log(e)
      this.detailParams.id  = e.salesOrderId
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    filterNodeLine(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
    },
    handleClick(tab, event) {
      if(this.activeName == 'first'){
        this.basLine()
      }else{
        this.getArea()
      }
    },
    basLine(name){
      crudLogisticsLoad.basLineList({name}).then(res => {
        this.basLineList = res.content
      }).catch((res)=>{
      })
    },
    getArea(name){
      crudLogisticsLoad.childBasCustomerAreaList({name}).then(res => {
        this.areaList = res.content
      }).catch((res)=>{
      })
    },
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.table-img {
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
.content{
  display: flex;
  //align-items: top;
  justify-content: flex-start;
  .left{
    width: 15%;
    //margin-top: 11px;
    .top{
      margin-bottom: 10px;
    }
    .cent{
      height: 400px;
      overflow-y: auto;
    }
  }
  .center{
    margin: 0 1%;
    width: 100%;
  }
  .right{
    width: 100%;
  }
}
.fotter{
  display: flex;
  align-items: center;
  height: 50px;
  line-height: 50px;
  margin-top: 20px;
  justify-content: space-between;
  .fotter-left{
    width: 50%;
    display: inline-block;
  }
  .fotter-right{
    width: 50%;
    text-align: right;
    display: inline-block;
  }
}
.fotters{
  width: 100%;
  text-align: center;
}
.center-bt{
  font-size: 14px;
  margin-top: 10px;
  .center-bt-left{
    margin-bottom: 10px;
    span{
      margin-right: 10px;
    }
  }
  .center-bt-right{
    //margin-bottom: 10px;
    span{
      margin-right: 10px;
    }
  }
}
</style>
